<template>
	<el-dialog v-model="visible" title="批量创建同步任务" :close-on-click-modal="false" :width="850">
		<div v-loading="loading">
			<el-steps :active="active" style="width: 100%" align-center>
				<el-step title="选择已建表对象"> </el-step>
				<el-step title="选择执行器"> </el-step>
				<el-step title="创建同步任务" />
			</el-steps>
			<br />
			<div v-if="active == 0">
				<div class="addTableTransfer" style="text-align: center; position: relative">
					<el-transfer
						ref="transfer"
						v-model="addTableData"
						filterable
						:props="{
							key: 'id',
							label: 'targetTableCode'
						}"
						:titles="['源列表', '目的表']"
						:filter-method="filterMethod"
						filter-placeholder="请输入搜索内容"
						:data="tableData"
						class="custom-transfer"
					>
						<template #default="{ option }">
							<span>{{ option.targetTableCode }}</span>
						</template>
					</el-transfer>
				</div>
			</div>
			<div v-else-if="active == 1" style="min-height: 400px;display: flex; justify-content: center">
				<div style="margin-top: 50px">
					选择执行器:
					<el-select placeholder="请选择执行器" filterable clearable v-model="actuatorId">
						<el-option v-for="(item, index) in actuatorData" :value="item.id" :label="item.title + item.appName" :key="index">
							<span>{{ item.title }}</span>
							(<span>{{ item.appName }}</span
							>)
						</el-option>
					</el-select>
				</div>
			</div>
			<div v-else style="min-height: 400px">
				<el-row>
					<el-col :span="6">
						<div style="text-align: center">选择数据库源</div>
					</el-col>
					<el-col :span="6">
						<div style="text-align: center">调度类型</div>
					</el-col>
					<el-col :span="6">
						<div style="text-align: center">选择目标数据库</div>
					</el-col>
					<el-col :span="6">
						<div style="text-align: center">目标表名</div>
					</el-col>
				</el-row>
				<template v-if="addTableData.length">
					<el-scrollbar height="400px">
						<el-row v-for="(item, index) in saveTableData" :key="index" :gutter="16" style="margin: 10px">
							<el-col :span="6">
								<el-input disabled v-model="item.metaSchema"></el-input>
								<!-- <el-select v-model="item.metaSchema" style="width: 100%" disabled>
									<el-option v-for="ele in sqlList" :label="ele.name" :value="ele.name"></el-option>
								</el-select> -->
							</el-col>
							<el-col :span="6">
								<el-select v-model="item.taskType" style="width: 100%" disabled>
									<el-option label="一次性全量同步" :value="2"></el-option>
									<el-option label="周期性增量" :value="3"></el-option>
								</el-select>
								<!-- <fast-select style="width: 100%" v-model="item.taskType" dict-type="task_type" disabled></fast-select> -->
							</el-col>
							<el-col :span="6">
								<el-select v-model="item.writerDatasourceId" style="width: 100%" disabled>
									<el-option v-for="ele in sqlList" :label="ele.name" :value="ele.id"></el-option>
								</el-select>
							</el-col>
							<el-col :span="6">
								<el-input disabled v-model="item.targetTableName"></el-input>
								<!-- <el-select v-model="item.targetTableCode" style="width: 100%" disabled>
								<el-option v-for="ele in addTableData" :label="ele.name" :value="ele.code"></el-option>
							</el-select> -->
							</el-col>
						</el-row>
					</el-scrollbar>
				</template>
				<template v-else>
					<el-empty></el-empty>
				</template>
			</div>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="visible = false">取消</el-button>
				<el-button v-if="active != 0" @click="preStep"> 上一步 </el-button>
				<el-button v-if="active != 2" type="primary" @click="nextStep"> 下一步 </el-button>
				<el-button v-if="active == 2" type="primary" @click="complateHandle"> 完成 </el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { listDatabase } from '@/api/data-integrate/database'
import { getMetadataSyncNotList, listChildApi, metadataSync } from '@/api/data-governance/metadata'
import { actuatorDataList } from '@/api/task-scheduling'
import { ElMessage } from 'element-plus'
import { debounce } from '@/utils/tool'
const emit = defineEmits(['close'])
const visible = ref(false)
const sqlList = ref([])
const actuatorData = ref([])
const actuatorId = ref()
const active = ref(0)

const transfer = ref()
const loading = ref(false)
const tableData = ref([])
const addTableData = ref([])
const saveTableData = ref([])
const metaProData = ref() // 库 属性信息
const sqlTableList = ref([])

const filterMethod = (query, item) => {
	return item.targetTableCode.toLowerCase().includes(query.toLowerCase())
}

const nodeData = ref({})
const init = (data, metaProperties) => {
	active.value = 0
	actuatorData.value = []
	visible.value = true
	nodeData.value = data
	metaProData.value = metaProperties
	actuatorId.value = ''
	tableData.value = []
	addTableData.value = []
	saveTableData.value = []
	loading.value = false

	sqlTableList.value = []

	if (transfer.value) {
		transfer.value.clearQuery('left')
		transfer.value.clearQuery('right')
	}

	listChildApi(nodeData.value.id).then(res => {
		sqlTableList.value = res.data
	})

	nextTick(() => {
		getLeftData()
		getSqData()

		active.value = 0
	})
}

const getLeftData = () => {
	getMetadataSyncNotList({
		parentId: nodeData.value.id
	}).then(res => {
		tableData.value = res.data
	})
}

const getSqData = () => {
	actuatorDataList().then(res => {
		actuatorData.value = res.data
	})

	listDatabase().then(res => {
		sqlList.value = res.data
	})
}

const preStep = () => {
	active.value--
}

const nextStep = () => {
	active.value++

	if (active.value === 2) {
		saveTableData.value = []
		const metaSchema = metaProData.value.length ? metaProData.value.filter(ele => ele.code == 'comment')[0].value : ''
		addTableData.value.forEach(item => {
			const targetTableCode = tableData.value.filter(ele => ele.id == item)[0].targetTableCode
			const targetDatabaseId = tableData.value.filter(ele => ele.id == item)[0].targetDatabaseId
			const metaTableName = tableData.value.filter(ele => ele.id == item)[0].code
			saveTableData.value.push({
				id: item,
				metaSchema: metaSchema,
				metaTableName: metaTableName,
				readerDatasourceId: '',
				executeId: actuatorId.value,
				taskType: 2,
				targetTableName: targetTableCode,
				writerDatasourceId: targetDatabaseId
			})
		})
	}
}
const complateHandle = () => {
	if (!actuatorId.value) {
		ElMessage.error('请选择执行器')
		return
	}

	if (!addTableData.value.length) {
		ElMessage.error('请选择需要同步的表')
		return
	}

	loading.value = true

	saveTableData.value.forEach(item => {
		item.readerDatasourceId = sqlList.value.filter(ele => ele.name == item.metaSchema)[0].id
	})
	// console.log(saveTableData.value)
	metadataSync(saveTableData.value)
		.then(res => {
			ElMessage.success('创建成功')
			emit('close')
			loading.value = false
			visible.value = false
		})
		.catch(() => {
			loading.value = false
		})
}

defineExpose({
	init
})
</script>
<style lang="less" scoped></style>
